<template>
  <div class="common-layout">
    <el-container>
      <el-header>
        <img src="/logo.png" alt="">
        <div>
          <span id="name">王二麻子</span>
          <span>退出登录</span>
        </div>
      </el-header>
      <el-container class="content">
        <el-aside width="200px">
          <el-menu
        default-active="/home/sheji"
        class="el-menu-vertical-demo"
        router
        >
        <el-menu-item index="/home/sheji">
        </el-menu-item>
        <el-menu-item index="/home/sheji">
            <el-icon><location /></el-icon>
            <span>项目管理</span>
        </el-menu-item>
        <el-menu-item index="2">
          <el-icon><icon-menu /></el-icon>
          <span>指导类别管理</span>
        </el-menu-item>
        
        <el-menu-item index="4">
          <el-icon><setting /></el-icon>
          <span>项目名称管理</span>
        </el-menu-item>
        <el-menu-item index="4">
          <el-icon><setting /></el-icon>
          <span>项目技术栈管理</span>
        </el-menu-item>
      </el-menu>
        </el-aside>
        <el-main >
          <el-scrollbar :height="height">
              <RouterView/>
          </el-scrollbar>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup lang='ts'>
import { ref, reactive, onUnmounted } from 'vue'
import { RouterView } from 'vue-router'
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from '@element-plus/icons-vue'
// 获取屏幕的高度减60的头部高度和el-main的上下边距20所以减100
const height = ref(window.innerHeight - 100)
//使用防抖 (setTimeout定时器)
const getWindowInfo = () => {
  console.log(window.innerHeight)
  height.value = window.innerHeight - 100
};
const debounce = (fn, delay) => {
	let timer;
	return function() {
		if (timer) {
			clearTimeout(timer);
		}
		timer = setTimeout(() => {
			fn();
		}, delay);
	}
};
//触发事件    触发时间（指定时间内执行事件）
const cancalDebounce = debounce(getWindowInfo, 300);
window.addEventListener('resize', cancalDebounce);
// 解除绑定
onUnmounted(() => {
  console.log('onUnmounted','打印是否生效');
  //移除监听事件
  window.removeEventListener('resize', cancalDebounce);
})


</script>
<style scoped>
.el-header{
  background-color: rgba(0, 183, 255, 0.466);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.el-header span{
  cursor: pointer;
}
#name{
  margin-right: 20px;
}
.el-menu {
  height: 100%;
}

</style>